// @flow

import * as React from 'react';
import Clases from 'classnames';
import {connect} from 'react-redux';
import Message from '../../components/SimpleLayer/Message';
import {clearTag} from '../../modules/utils';
import {remember,changeUserName,changePswd,loging,login} from '../../actions/login.action';
import Logo from '../../assets/imgs/logo.jpg';

type Props = {
	remember: Function,
	changeUserName: Function,
	changePswd: Function,
	loging: Function,
	login: Function,
	isLoging: boolean,
	isRemember: boolean,
	userName: string,
	passWord: string
}

@connect(mapStateToProps, mapDispatchToProps)
export default class Login extends React.Component<Props> {
	showErr(error: string){
		Message.error({
			top:'6px',
			width:'300',
			content:error,
			delayAutoClose:2000,
			yes:false
		});
	}
	componentDidMount(){
		clearTag();
	}
	clearTag(e: Object,fn: "changeUserName"|"changePswd"): void{
		this.props[fn](e.currentTarget.value);
	}
	handleSubmit(): void{
		let {
			isLoging,
			isRemember,
			userName,
			passWord,
			loging
		} = this.props;
		if (isLoging) return;
		if (!userName) {
			this.showErr('请输入账号！');
			return;
		}
		if (!passWord) {
			this.showErr('请输入密码！');
			return;
		}
		loging(true);
		this.props.login({
			isRemember,
			name:userName,
			pswd:passWord
		});
		
	}
	render(): React.Node {
		let {
			isLoging,
			isRemember,
			userName,
			passWord
		} = this.props;
		let ckClas = Clases("iconfont icon-check fl",{checked:isRemember});
		return (
			<div className="login">
				<div className="login-cont">
					<img src={Logo} alt="Logo" width={160} height={52} className="logo" />
					<div className="login-item">
						<input 
							type="text" 
							className="inpt ease3" 
							placeholder="账号" 
							spellCheck="false" 
							defaultValue={userName} 
							onChange={e => this.props.changeUserName(e.target.value)}
							onKeyUp={e => this.clearTag(e,'changeUserName')}/>
					</div>
					<div className="login-item">
						<input 
							type="password" 
							className="inpt ease3" 
							placeholder="密码" 
							defaultValue={passWord} 
							onChange={e => this.props.changePswd(e.target.value)}
							onKeyUp={e => this.clearTag(e,'changePswd')}/>
					</div>
					<div className="ctrls">
						<div className="remember fl" onClick={() => this.props.remember(!this.props.isRemember)}>
							<div className={ckClas}></div>
							记住登录
						</div>
					</div>
					<div className="btn btn-primary ease3 btn-login" onClick={this.handleSubmit.bind(this)}>登录{isLoging?'中...':''}</div>
				</div>
			</div>
		);
	}
}

function mapStateToProps(state: Object): Object {
	return {
		isLoging:state.Login.isLoging,
		isRemember:state.Login.isRemember,
		userName:state.Login.userName,
		passWord:state.Login.passWord
	}
}
function mapDispatchToProps(dispatch: Function): Object {
	return {
		remember: isRemember => dispatch(remember(isRemember)),
		changeUserName: name => dispatch(changeUserName(name)),
		changePswd: pswd => dispatch(changePswd(pswd)),
		loging: isLoging => dispatch(loging(isLoging)),
		login: data => dispatch(login(data))
	}
}